<template>
  <div>
    <cus-modal
      ref="modal"
      :title="showUpload ? (titleName ? titleName : '导入数据') : '导出数据'"
      @on-visible-change="onVisibleChange"
      width="750"
    >
      <div>
        <Form ref="formValidate" :model="form">
          <FormItem
            label="区域"
            prop="kitchenArea"
            :label-width="60"
            :rules="[
              { required: true, message: '区域不能为空', trigger: 'change' },
            ]"
          >
            <Select v-model="form.kitchenArea" style="width: 150px" @on-change="changeArea">
              <Option
                v-for="item in areaList"
                :key="item.kitchenArea"
                :value="item.kitchenArea"
                >{{ item.kitchenAreaName }}
              </Option>
            </Select>
          </FormItem>
          <!-- <FormItem
            label="供应商"
            prop="supplyId"
            :label-width="70"
            :rules="{
              type: 'number',
              required: true,
              message: '供应商不能为空',
              trigger: 'change',
            }"
          >
            <Select
              v-model="form.supplyId"
              style="width: 150px"
              placeholder="请选择供应商"
            >
              <Option
                :value="item.id"
                v-for="(item, index) in querySupplierList"
                :key="index"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem> -->
        </Form>
      </div>
      <div class="draw-section">
        <slot name="left"></slot>
        <Card
          class="draw-section-item ml_24"
          v-if="showTemp"
          @click.native="downloadTemp"
        >
          <div class="draw-section-item-logo flex">
            <svg
              t="1628043668627"
              class="icon"
              viewBox="0 0 1417 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="19836"
              width="128"
              height="128"
            >
              <path
                d="M708.923077 356.273231c29.617231 0 54.035692 22.528 56.950154 51.436307l0.315077 5.828924v343.04l81.289846-81.211077a57.265231 57.265231 0 0 1 76.327384-4.17477l4.726154 4.17477a57.265231 57.265231 0 0 1 4.096 76.327384l-4.174769 4.726154-179.042461 178.963692a57.265231 57.265231 0 0 1-76.406154 4.17477l-4.568616-4.17477-179.042461-179.042461a57.265231 57.265231 0 0 1 76.406154-85.149539l4.568615 4.17477 81.289846 81.211077V413.538462c0-26.939077 18.589538-49.624615 43.716923-55.611077l7.719385-1.339077L708.923077 356.273231zM708.923077 17.092923c203.303385 0 376.359385 143.123692 408.969846 336.344615l-2.048-10.712615 13.627077 3.308308c126.660923 33.870769 218.112 143.202462 224.964923 271.753846l0.393846 15.596308c0 164.706462-137.688615 298.062769-307.278769 298.062769h-24.260923a56.792615 56.792615 0 0 1-57.501539-56.162462c0-31.113846 25.836308-56.162462 57.501539-56.162461h24.260923c106.338462 0 192.354462-83.259077 192.354462-185.737846 0-97.516308-78.296615-178.648615-178.884924-185.344a56.871385 56.871385 0 0 1-53.484307-51.672616C995.643077 246.075077 865.516308 129.339077 708.923077 129.339077s-286.72 116.736-298.692923 267.027692a56.871385 56.871385 0 0 1-53.405539 51.672616c-100.588308 6.695385-178.806154 87.827692-178.806153 185.344 0 102.4 85.937231 185.737846 192.275692 185.737846h24.260923c31.586462 0 57.501538 25.048615 57.501538 56.162461a56.792615 56.792615 0 0 1-57.501538 56.162462H370.215385C200.704 931.446154 63.015385 798.089846 63.015385 633.383385c0-143.675077 105.550769-266.24 249.540923-292.864l-10.633846 2.284307 1.339076-6.774154C341.858462 157.459692 501.366154 25.521231 690.491077 17.486769z"
                p-id="19837"
              ></path>
            </svg>
          </div>
          <div class="draw-section-item-title">{{ uploadLabel }}</div>
          <div class="draw-section-item-label">{{ uploadLabel }}文件</div>
        </Card>
        <Card class="draw-section-item" v-if="showUpload" >
          <cus-upload          
            :uploadFnc="uploadFnc"
            :autoUpload="true"
            :accept="accept"
            @onOk="onOk"
            :disabled="disabled"
            :cus-params="{
              kitchenArea: form.kitchenArea,
              // supplyId: form.supplyId,
            }"
            @onBeforeUpload="onBeforeUpload"
            :fileName="fileName"
            @onError="onError"
          >
            <div class="draw-section-item-logo flex">
              <svg
                t="1628043694436"
                class="icon"
                viewBox="0 0 1157 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="24667"
                width="118"
                height="118"
              >
                <path
                  d="M0.09216 582.528c0-124.37504 82.23744-233.71264 192.1536-266.112C253.07648 156.0832 403.70688 40.96 579.93216 40.96c177.64352 0 324.18304 115.07712 384.96768 275.456 113.4336 33.152 192.19968 141.06624 192.19968 266.112 0 153.96864-119.57248 279.14752-270.91968 279.14752-28.34432 0-53.92896-26.60864-53.92896-56.06912 0-33.8176 25.58464-56.1152 53.92896-56.1152 91.22816 0 163.80928-74.09664 163.80928-166.87616 0-49.61792-21.44768-95.67744-56.64768-125.1328l-9.66144-9.43616a48.96256 48.96256 0 0 0-12.46208-10.05568c-2.75968-3.60448-9.03168-3.60448-12.46208-6.49728h-3.42528c-2.75968-3.5584-6.23104-3.5584-9.0368-6.4512h-3.47136c-2.75968 0-6.23104-3.5584-9.65632-3.5584-2.75968 0-6.23104 0-6.23104-2.8928h-9.0368c-3.47136 0-6.23104 0-9.7024-3.60448h-25.4976c-2.75968-10.81344-6.23104-18.688-6.23104-29.50144-2.75968 0-2.75968-3.5584-2.75968-6.4512-3.42528-6.49728-3.42528-12.90752-6.23104-19.44576 0-3.5584-3.42528-3.5584-3.42528-7.16288-2.75968-6.49728-6.23104-12.90752-9.65632-19.4048v-6.49728c-2.80576-6.4512-9.07776-12.90752-12.46208-19.44576-53.18144-92.11392-151.38816-154.63936-261.97504-154.63936-113.34144 0-211.46624 62.5664-264.68864 154.63936l-9.0368 19.44576c0 2.18112-1.42336 2.18112-2.08896 4.31616l-1.3824 2.18112-9.7024 19.4048v7.16288l-8.94464 19.44576v6.4512c-3.47136 10.77248-6.94272 18.688-6.94272 29.46048h-28.30336c-2.75968 3.60448-6.23104 3.60448-8.94464 3.60448h-6.23104c-2.75968 2.18112-4.14208 2.8928-4.89472 2.8928a1.24928 1.24928 0 0 1-2.048 0c-2.75968 0-6.23104 3.5584-9.03168 3.5584h-6.23104c-3.42528 2.93376-6.23104 2.93376-9.65632 6.49728h-3.42528c-2.75968 2.8928-6.23104 2.8928-9.07776 6.49728h-3.42528c-2.75968 3.5584-6.23104 6.4512-9.7024 10.05568-6.23104 2.84672-8.94464 6.49728-12.416 9.39008-35.24608 29.50656-53.2224 75.56096-53.2224 125.17888 0 92.77952 72.58112 166.87616 160.37888 166.87616 32.4864 0 56.69376 22.29248 56.69376 56.06912 0 29.50656-24.20736 56.07424-56.69376 56.07424-147.82976 0.04096-270.8736-125.13792-270.8736-279.01952v-0.09216z"
                  p-id="24668"
                ></path>
                <path
                  d="M362.94656 566.72768c0-16.54784 6.23104-28.78976 12.46208-39.56224l163.7632-186.90048c10.41408-10.81344 24.91904-16.55296 40.8064-16.55296 15.92832 0 28.34432 5.7856 41.47712 16.512l160.37888 186.98752c21.5296 22.19008 21.00224 57.63072-1.18784 79.16544a56.00256 56.00256 0 0 1-39.57248 15.80032c-15.92832 0-27.67872-8.6784-38.04672-19.45088l-69.10976-78.40768v281.9584c0 33.8176-24.21248 55.3984-53.93408 55.3984-31.104 0-53.2224-21.5808-53.2224-55.3984v-281.91232L457.69728 602.7264c-10.368 10.81344-25.54368 19.45088-41.43104 19.45088-28.3904 0-53.31456-25.90208-53.31456-55.40352v-0.04608z"
                  p-id="24669"
                ></path>
              </svg>
            </div>
            <div class="draw-section-item-title">{{ exportLabel }}</div>
            <div class="draw-section-item-label">
              {{ exportLabel }}文件 <br />
              可拖拽上传
            </div>
          </cus-upload>
        </Card>
       
        <slot name="right"></slot>
      </div>
      <div slot="footer">
        <div class="modal-footer">
          <cus-button size="small" class="mr_2" @onClick="onCancel"
            >关闭</cus-button
          >
        </div>
      </div>
    </cus-modal>
  </div>
</template>
  
  <script>
import { getDishType } from "@/api/organ/dishesModule";
import { number } from "echarts";
/**
 * @tempSrc       模板导出地址
 * @uploadFnc     文件上传方法
 * @accept        上传文件类型
 * @fileName      文件名,默认file
 * @cusParams     自定义额外参数
 *
 * @onClear 导入文件
 */
const form = {
  id: "",
  index: [],
  phone: "",
  administration: "",
  name: "",
  descr: "",
  kitchenArea: "",
  supplyId: "",
};

export default {
  name: "addSupplier",
  data() {
    return {
      form: form,
      querySupplierList: [],
      disabled: true,
    };
  },
  props: {
    titleName: {
      type: String,
      default: "",
    },
    showTemp: {
      type: Boolean,
      default: true,
    },
    showUpload: {
      type: Boolean,
      default: true,
    },
    exportLabel: {
      type: String,
      default: "导入excel",
    },
    uploadLabel: {
      type: String,
      default: "下载模板",
    },
    tempSrc: {
      type: String,
      default: "",
    },
    uploadFnc: {
      type: Function,
      default: () => {},
    },
    accept: {
      type: String,
      // excel -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel
      default: "",
    },
    fileName: {
      type: String,
      default: "file",
    },
    cusParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    areaList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    kitchenAreaP: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      this.$refs["formValidate"].resetFields();
     
      console.log(this.disabled);
      
    },
    // 改变区域选择是否禁用导入
    changeArea() {
      this.$refs['formValidate'].validate(valid => {
          if (valid) {
            this.disabled = false;
          }else {
            this.disabled = true
          }
        })
    },
    onCancel() {
      this.$refs["modal"].show = false;
    },
    onOk(res) {
      this.$refs["modal"].show = false;
      this.$emit("onOk", res);
    },
    show() {
      this.$refs["modal"].show = true;
      this.$nextTick(() => {
        this.form.kitchenArea = this.kitchenAreaP;
        this.$refs['formValidate'].validate(valid => {
          if (valid) {
            this.disabled = false;
          } else {
            this.disabled = true
          }
        })
      });
    },
    downloadTemp() {
      this.$emit("downloadTemp");
      window.location.href = this.tempSrc;
    },
    uploadTemp() {
      this.$emit("uploadTemp");
    },
    onError(data) {
      this.$emit("onError", data);
    },
    onBeforeUpload(file) {
      this.$emit("onBeforeUpload", file);
    },
    // 获取供应商列表
    // querySupplierNamelistApi() {
    //   return new Promise((resolve) => {
    //     getDishType({}).then((res) => {
    //       if (res.code === 1) {
    //         this.querySupplierList = res.data;
    //         if (res.data.length > 0) {
    //           this.form.supplyId = res.data[0].id;
    //         }
    //         resolve();
    //       }
    //     });
    //   });
    // },
  },
  watch: {
  }
};
</script>
  
  <style scoped lang="less">
.draw {
  &-section {
    display: flex;
    align-items: center;
    justify-content: space-around;

    &-item {
      background: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 220px;
      cursor: pointer;
      width: 200px;

      &-title {
        text-align: center;
        margin-top: 10px;
        color: rgba(51, 51, 51, 1);
      }

      &-label {
        text-align: center;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
}
</style>
  